<template>
  <div id="survey">
    <div class="infor"><img :src="img" alt=""/></div>
    <div class="center">
      <h3 class="suvery">{{name}}</h3>
      <ul class="suveryQ">
          <li v-for="(li,index) in lists" :key="index">
              <div > <span style="color: red; margin-right: 10px;">*</span><span><span v-if="index < 9">0</span>{{index+1}}</span> {{li.question}}</div>
              <span v-for="kk in li.keys" v-if="li.type == 1" :key='kk'>
                  <input  :id="'ques' + kk.id" type="radio" v-model="askAry[index].key" :value="kk.id"/>
                  <label v-text="kk.desc" :for="'ques'+kk.id"></label>
              </span>
              <span v-for="kk in li.keys" v-if="li.type == 2" :key="kk">
                  <input  :id="'ques' + kk.id" type="checkbox" v-model="askAry[index].key" :value="kk.id"/>
                  <label v-text="kk.desc" :for="'ques'+kk.id"></label>
              </span>
              <span v-if="li.type == 3" >
                  <textarea v-model="askAry[index].key" ></textarea>
              </span>
          </li>
          <div class="suverySubmit"><button @click="submitS()">提交</button></div>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'survey',
  data () {
    return {
      img: require('../assets/images/survey.png'),
      name: '',
      lists: [],
      askAry: []
    };
  },
  mounted () {
    this.showData();
  },
  methods: {
    showData () {
      this.axios.get('crm/exam-paper?slug=questionnaire')
        .then(({data}) => {
          if (data.code === 200) {
            this.name = data.data.name;
            this.lists = data.data.asks;
            let _lists = data.data.asks;
            for (let i in _lists) {
              let _tmpAry = {
                'id': _lists[i].id,
                'key': _lists[i].type === 2 ? [] : ''
              };
              this.askAry.push(_tmpAry);
            }
          } else {
            this.$message({
              message: data.msg,
              type: 'warning'
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    submitS () {
      let istrue = true;
      let index = 0;
      for (let i = 0; i < this.askAry.length; i++) {
        if (this.askAry[i].key === '' || this.askAry[i].key.length === 0) {
          istrue = false;
          index = i;
          break;
        }
      };
      if (istrue) {
        this.axios.post('crm/exam-paper', {
          slug: 'questionnaire',
          ask: this.askAry
        })
          .then(({data}) => {
            if (data.code === 200) {
              this.$message({message: '提交成功', type: 'success'});
              this.$router.go(-1);
            } else {
              this.$message({message: data.msg, type: 'warning'});
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        this.$message({message: `有未完成的选项请核查第${index + 1}项`, type: 'warning'});
      }
    }
  }
};
</script>

<style lang="scss">
  #survey {
    .infor {
      img {
        width: 100%;
      }
    }
    .center {
        width: 1200px;
        margin: 0 auto;
        .suvery{
          text-align: center;
          padding: 20px 0;
          border-bottom: 1px solid #dfdfdf;
        }
        .suveryQ{
          font-size: 16px;
          color: #333;
          border-bottom: 1px solid #dfdfdf;
        }
        .suveryQ li{
          padding: 20px 0;
          padding-left: 2%;
          border-bottom: 1px solid #dfdfdf;
        }
        .suveryQ li:nth-last-of-type(1){
          border-bottom: none;
        }
        .suveryQ li div{
          margin-bottom: 10px;
        }
        .suveryQ li span label{
          margin-left: 10px;
        }
        .suveryQ li span input{
          margin-left: 40px;
        }
        .suveryQ li span textarea{
          width: 80%;
          margin-top: 10px;
          height:100px;
          resize: none;
          padding: 10px;
          outline: none;
          border: 1px solid #dfdfdf;
          font-size: 14px;
        }
        .suverySubmit{
          text-align: center;
          margin-top: 20px;
          margin-bottom: 50px;
        }
        .suverySubmit button{
          background-color: #10a57d;
          color: #fff;
          padding: 5px 30px;
          border: none;
          border-radius: 2px;
        }
      }
  }
</style>
